{% extends 'base.html' %}


{% block content %}
    <script>
        function comment(movieId) {
            let content = $('#content').val();

            if (!content) {
                myAlert('Comment is Blank!', 'warning')
                return
            }

            $.ajax({
                type: "post",
                url: '/add_comment',
                data: JSON.stringify({
                    movie_id: movieId,
                    content: content
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                mode: 'same-origin',
                success: (res) => {
                    if (res.code === -1) {
                        // 未登录
                        myAlert(res.msg, 'warning');
                        return
                    }

                    if (res.code === 0) {
                        // 成功

                        {#$('#my_favor_genres').html(htmlLi)#}

                        myAlert(res.msg, 'success');

                        // 清空评论输入框
                        $('#content').val('');

                        // 更新 评论列表
                        get_comment_list()
                        return
                    }
                    myAlert(res.msg, 'danger');
                },
                error: function (err) {
                    console.error('error')
                    console.error(err)
                }
            })
        }

        function get_comment_list(page) {
            let sortVal = $("input[name='sortOption']:checked").val();


            if (!page) {
                page = 1
            }
            $.ajax({
                type: "get",
                url: '/comment_list',
                data: {
                    movie_id: {{ movie.id }},
                    page: page,
                    sort: sortVal
                },
                mode: 'same-origin',
                success: (res) => {
                    if (res.code === 0) {

                        let commentList = res.data.list
                        let commentCount = res.data.count
                        let pages = res.data.pages  // 总页数
                        let nowPage = res.data.page // 当前页数

                        // 成功

                        // 组装 列表数据
                        let tmp = ''
                        commentList.forEach(item => {
                            tmp += `<div style="padding: 0 8px">
                                        <div style="display: flex;justify-content: space-between">
                                            <div style="display: flex;align-items: center">
                                                <div style="color: #005cbf;font-weight: 600;margin-right: 24px">${item.user.username}</div>
                                                <div class="my_small_text">${item.created_at}</div>
                                            </div>

                                            <div>
                                                <button class="btn btn-sm btn-success" onclick="agree(${item.id}, true)">${item.agree} agree</button>
                                                <button class="btn btn-sm btn-danger" onclick="agree(${item.id}, false)">${item.disagree} disagree</button>
                                            </div>
                                        </div>
                                        <div style="color: #4a4a4a;font-size: 13px;margin-top:8px">${item.content}</div>
                                    </div><hr />`
                        })

                        // 组装分页
                        let pagingTmp = ''
                        if (pages) {
                            // Previous
                            pagingTmp += `<li class="page-item ${nowPage === 1 ? 'disabled' : ''}"><span class="page-link" onclick="get_comment_list(${nowPage - 1})">Previous</span></li>`
                            // 页码按钮
                            let index = 0
                            while (index < pages) {
                                pagingTmp += `<li class="page-item num_li ${nowPage === index + 1 ? 'active active_page_pos' : ''}"><span class="page-link" onclick="get_comment_list(${index + 1})">${index + 1}</span></li>`
                                index += 1
                            }
                            // Next
                            pagingTmp += `<li class="page-item ${nowPage === pages ? 'disabled' : ''}"><span class="page-link" onclick="get_comment_list(${nowPage + 1})">Next</span></li>`
                        }
                        $('.pagination').html(pagingTmp);


                        // 更新评论数据
                        $('.comment-list').html(tmp);
                        $('.comment-count').text(commentCount)
                        return
                    }
                    myAlert(res.msg, 'danger');
                },
                error: function (err) {
                    console.error('error')
                    console.error(err)
                }
            })
        }

        function agree(commentId, agreeVal) {

            $.ajax({
                type: "post",
                url: '/agree_comment',
                data: JSON.stringify({
                    comment_id: commentId,
                    agree: agreeVal
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                mode: 'same-origin',
                success: (res) => {
                    if (res.code === -1) {
                        // 未登录
                        myAlert(res.msg, 'warning');
                        return
                    }

                    if (res.code === 0) {
                        // 成功

                        myAlert(res.msg, 'success');

                        // 清空评论输入框
                        {#$('#content').val('');#}

                        // 获取当前页码
                        let nowPage = $('.active_page_pos span').text()

                        // 更新 评论列表
                        get_comment_list(nowPage)
                        return
                    }
                    myAlert(res.msg, 'danger');
                },
                error: function (err) {
                    console.error('error')
                    console.error(err)
                }
            })
        }

        function favor(movieId) {
            $.ajax({
                type: "post",
                url: '/favor',
                data: JSON.stringify({
                    movie_id: movieId,
                }),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                mode: 'same-origin',
                success: (res) => {
                    if (res.code === -1) {
                        // 未登录
                        myAlert(res.msg, 'warning');
                        return
                    }

                    if (res.code === 0) {
                        // 成功
                        {#debugger;#}

                        let nowFavorStatus = res.data

                        myAlert(res.msg, 'success');

                        // 刷新
                        // 在指定刷新的位置，更新 电影的喜欢状态
                        let dom = $('.details_favor');

                        if (nowFavorStatus) { // 状态-喜欢
                            dom.removeClass('fa fa-heart-o')
                            dom.addClass('fa fa-heart')
                        } else { // 状态-非喜欢
                            dom.removeClass('fa fa-heart')
                            dom.addClass('fa fa-heart-o')
                        }


                        return
                    }
                    myAlert(res.msg, 'danger');
                },
                error: function (err) {
                    console.error('error')
                    console.error(err)
                }
            })
        }

        $(document).ready(function () {
            // 初始化
            get_comment_list()

            // 监听 排序radio框的变化
            $('input[type=radio][name=sortOption]').change(function () {
                get_comment_list()
            })
        });
    </script>

    <div class="main-container" style="margin: 0 auto">

        <div class="border border-success rounded" style="padding: 24px;position: relative;min-width: 800px">
            <h2>{{ movie.name }}</h2>

            {#喜欢#}
            <div style="position: absolute;right: 32px;top: 32px">
                {% if session.user %}
                    <i class="{% if movie.get_user_favor_movie_status() %} fa fa-heart {% else %} fa fa-heart-o {% endif %} details_favor"
                       style="color: #DC3545;cursor: pointer"
                       onclick="favor({{ movie.id }})"></i>
                {% endif %}
            </div>

            <div style="display: flex;align-items: flex-start">
                <img style="object-fit: contain;max-width: 200px;max-height: 300px;"
                     src="{{ url_for('static',filename=movie.image_path) }}"
                     title="{{ movie.desc }}"
                     alt="">
                <div style="margin-left: 24px">
                    <div class="my_flex">
                        <span class="item-title">Year:</span>
                        {{ movie.year }}
                    </div>
                    <div class="my_flex">
                        <span class="item-title">Directors:</span>
                        {{ movie.directors }}
                    </div>
                    <div class="my_flex">
                        <span class="item-title">Actors:</span>
                        {{ movie.actors }}
                    </div>
                    <div class="my_flex">
                        <span class="item-title">Genres:</span>
                        {% for genre_item in movie.get_genres() %}
                            {{ genre_item.value }}
                        {% endfor %}
                    </div>
                    <div class="my_flex">
                        <span class="item-title">Desc:</span>
                        {{ movie.desc }}
                    </div>
                </div>
            </div>

            <hr>

            {# 评分#}
            <div>
                <h4>Avg Score</h4>
                <div class="my_xy_center">
                    <div class="score-block">{{ movie.get_avg_score() }}</div>
                    <div class="my_small_text">
                        ({{ movie.get_score_count() }} User Score)
                    </div>
                </div>

            </div>

            <hr>

            {# 评论#}
            <div>
                <div style="display: flex;align-items: center">
                    <h4>Comments</h4>
                    <div style="margin-left: 24px">
                        <span class="comment-count">{{ movie.get_comments_count() }} </span>
                        <span class="my_small_text">comments in total</span>
                    </div>
                </div>


                <div>
                    <div class="form-group">
                        <textarea name="content" id="content"
                                  class="form-control" rows="3"
                                  placeholder="Please enter your review of the movie"></textarea>
                    </div>
                    <button class="btn btn-primary btn-sm form-control" onclick="comment({{ movie.id }})">Comment
                    </button>
                </div>

                <hr>

                <div style="display: flex;align-items: center;justify-content: space-between">
                    {# 评论分页#}
                    <nav aria-label="...">
                        <ul class="pagination pagination-sm"></ul>
                    </nav>

                    {# 排序#}
                    <div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="sortOption" id="inlineRadio1"
                                   value="sort_by_time" checked>
                            <label class="form-check-label" for="inlineRadio1">sort by time</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="sortOption" id="inlineRadio2"
                                   value="sort_by_agree">
                            <label class="form-check-label" for="inlineRadio2">sort by agree</label>
                        </div>
                    </div>
                </div>

                {# 评论列表#}
                <div class="comment-list">

                </div>
            </div>
        </div>
    </div>


    <style>
        .main-container {
            width: 800px;
            margin: 8px 24px;
            display: flex;
            justify-content: space-around;
        }

        .score-block {
            font-size: 30px;
            font-weight: 600;
            color: #dd5811;
            margin: 0 8px;
        }

        .item-title {
            width: 80px;
            min-width: 80px;
            color: gray;
        }

        .comment-list {

        }

        .comment-count {
            color: #007bff;
        }

        .pagination .num_li {
            cursor: pointer;
        }
    </style>
{% endblock content %}